import { TimeInputDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.TimeInput);

## Usage

<InputFeatures component="TimeInput" element="input" />

<Demo data={TimeInputDemos.configurator} />

## TimePicker component

`TimeInput` component is based on the native `input[type="time"]` element and does not support
most of advanced features like choosing time format or custom dropdown with time select. If you need
more features, use [TimePicker](/dates/time-picker) component instead.

`TimeInput` features/limitations:

- Native `input[type="time"]` element
- Native browser controls for time selection on mobile devices
- Time format depends on the user's locale
- Only native dropdown with hours/minutes/seconds, does not work in Firefox
- Mobile Safari does not provide an option to select seconds

## Controlled

```tsx
import { useState } from 'react';
import { TimeInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState('');
  return (
    <TimeInput
      value={value}
      onChange={(event) => setValue(event.currentTarget.value)}
    />
  );
}
```

## Show browser picker

You can show browser picker by calling `showPicker` method of input element.
Note that some browsers (desktop Safari) do not support this feature and the
method will do nothing.

<Demo data={TimeInputDemos.picker} />

## With seconds

<Demo data={TimeInputDemos.withSeconds} />

## With icon

<Demo data={TimeInputDemos.icon} />

## Disabled state

<Demo data={TimeInputDemos.disabled} />

<GetElementRef
  component="TimeInput"
  refType="input"
  package="@mantine/dates"
/>

<InputAccessibility
  component="TimeInput"
  packageName="@mantine/dates"
/>
